<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
	</head>
	<style>
		        *{
		            margin: 0;
		            padding: 0;
		            box-sizing: border-box;
		        }
		        .sidebar {
		            width: 235px;
		            height: 460px;
		            background-color: #f4d8ff;
		        }
		
		        .ul-sidebar {
		            list-style-type: none;
		        }
		
		        .ul-sidebar li {
		            width: 235px;
		            height: 46px;
					font-family: 华文行楷;
		            line-height: 46px;
		            font-size: 16px;
					text-align: center;
		        }
		        .ul-sidebar li:hover {
		            background-color: #aaffff;
		        }
	</style>
	<body>
		<!-- html结构：外层有一个div（.sidebar）
		              内层ul.ul-sidebar  li*10 (内容参照京东)
			css结构：内部引入方式
					加通配选择器----合理添加
					外层div.sidebar宽高235*460  背景色自定
					内层每一个li加宽高235*46
					内层文本垂直居中对齐，文字：16px
					鼠标移动上去有背景色改变
					
					-->
					
					
	 <div class="sidebar">
	        <ul class="ul-sidebar">
	            <li>家用电器</li>
	            <li>手机</li>
	            <li>家居</li>
	            <li>男装</li>
	            <li>美妆</li>
	            <li>母婴</li>
	            <li>食品饮料</li>
	            <li>运动户外</li>
	            <li>汽车用品</li>
	            <li>图书</li>
	        </ul>
	    </div>				
					
	</body>
</html>